<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>存款业务管理</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
  <div class="d-flex">
    <nav class="flex-column bg-dark text-white p-3" style="width: 220px; height: 100vh;">
      <h4>后台管理</h4>
      <ul class="nav flex-column">
        <li class="nav-item"><a href="/admin/customers" class="nav-link text-white">客户管理</a></li>
        <li class="nav-item"><a href="/admin/cards" class="nav-link text-white">银行卡管理</a></li>
        <li class="nav-item"><a href="/admin/deposits" class="nav-link text-white active">存款业务管理</a></li>
        <li class="nav-item"><a href="/admin/transactions" class="nav-link text-white">交易管理</a></li>
      </ul>
    </nav>
    <main class="flex-fill p-4">
      <h3>存款业务管理</h3>
      <div class="mb-3">
        <button class="btn btn-success mb-2">新增业务</button>
        <button class="btn btn-info mb-2">导出CSV</button>
        <button class="btn btn-info mb-2" data-bs-toggle="modal" data-bs-target="#searchModal">查询</button>
      </div>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>业务类型编号</th>
            <th>业务名称</th>
            <th>描述</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="deposits-tbody">
        </tbody>
      </table>
    </main>
  </div>
  <!-- 通用编辑/删除 Modal -->
  <div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="editForm">
          <div class="modal-header">
            <h5 class="modal-title" id="modalTitle">编辑</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body" id="modalBody"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary" id="modalSaveBtn">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- 查询Modal -->
  <div class="modal fade" id="searchModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="searchForm">
          <div class="modal-header">
            <h5 class="modal-title">查询条件</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <input type="text" class="form-control mb-2" id="searchSavingID" placeholder="业务编号">
            <input type="text" class="form-control mb-2" id="searchSavingName" placeholder="业务名称">
            <input type="text" class="form-control mb-2" id="searchDescrip" placeholder="描述">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary">确定</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script>
  async function loadDeposits() {
    const res = await fetch('/api/admin/deposits');
    const data = await res.json();
    const tbody = document.getElementById('deposits-tbody');
    tbody.innerHTML = '';
    data.forEach(d => {
      tbody.innerHTML += `<tr>
        <td>${d.savingID}</td>
        <td>${d.savingName}</td>
        <td>${d.descrip}</td>
        <td>
          <button class='btn btn-sm btn-primary' onclick='openEditModal(${JSON.stringify(d)})'>编辑</button>
          <button class='btn btn-sm btn-danger' onclick='openDeleteModal(${d.savingID})'>删除</button>
        </td>
      </tr>`;
    });
  }
  document.addEventListener('DOMContentLoaded', loadDeposits);

  // 新增存款业务
  if(document.querySelector('.btn-success')){
    document.querySelector('.btn-success').onclick = function() {
      document.getElementById('modalTitle').innerText = '新增存款业务';
      document.getElementById('modalBody').innerHTML = `
        <div class="mb-3">
          <label class="form-label">业务名称</label>
          <input type="text" class="form-control" id="editSavingName">
        </div>
        <div class="mb-3">
          <label class="form-label">描述</label>
          <input type="text" class="form-control" id="editDescrip">
        </div>
      `;
      document.getElementById('modalSaveBtn').onclick = saveNewDeposit;
      new bootstrap.Modal(document.getElementById('editModal')).show();
    };
  }
  async function saveNewDeposit(e) {
    e.preventDefault();
    const savingName = document.getElementById('editSavingName').value;
    const descrip = document.getElementById('editDescrip').value;
    const res = await fetch('/api/admin/deposits', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ savingName, descrip })
    });
    if ((await res.json()).msg === '存款业务添加成功') {
      alert('新增成功');
      location.reload();
    } else {
      alert('新增失败');
    }
  }
  // 编辑存款业务
  function openEditModal(d) {
    document.getElementById('modalTitle').innerText = '编辑存款业务';
    document.getElementById('modalBody').innerHTML = `
      <input type="hidden" id="editSavingID" value="${d.savingID}">
      <div class="mb-3">
        <label class="form-label">业务名称</label>
        <input type="text" class="form-control" id="editSavingName" value="${d.savingName}">
      </div>
      <div class="mb-3">
        <label class="form-label">描述</label>
        <input type="text" class="form-control" id="editDescrip" value="${d.descrip}">
      </div>
    `;
    document.getElementById('modalSaveBtn').onclick = saveEditDeposit;
    new bootstrap.Modal(document.getElementById('editModal')).show();
  }
  async function saveEditDeposit(e) {
    e.preventDefault();
    const savingID = document.getElementById('editSavingID').value;
    const savingName = document.getElementById('editSavingName').value;
    const descrip = document.getElementById('editDescrip').value;
    const res = await fetch(`/api/admin/deposits/${savingID}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ savingName, descrip })
    });
    if ((await res.json()).msg === '存款业务信息已更新') {
      alert('保存成功');
      location.reload();
    } else {
      alert('保存失败');
    }
  }
  // 删除存款业务
  function openDeleteModal(savingID) {
    document.getElementById('modalTitle').innerText = '删除确认';
    document.getElementById('modalBody').innerHTML = `<p>确定要删除业务类型编号 ${savingID} 吗？</p>`;
    document.getElementById('modalSaveBtn').onclick = function(e) {
      e.preventDefault();
      deleteDeposit(savingID);
    };
    new bootstrap.Modal(document.getElementById('editModal')).show();
  }
  async function deleteDeposit(savingID) {
    const res = await fetch(`/api/admin/deposits/${savingID}`, { method: 'DELETE' });
    if ((await res.json()).msg === '存款业务已删除') {
      alert('删除成功');
      location.reload();
    } else {
      alert('删除失败');
    }
  }
  document.getElementById('searchForm').onsubmit = async function(e) {
    e.preventDefault();
    const params = new URLSearchParams({
      savingID: document.getElementById('searchSavingID').value,
      savingName: document.getElementById('searchSavingName').value,
      descrip: document.getElementById('searchDescrip').value
    });
    const res = await fetch('/api/admin/deposits/search?' + params.toString());
    const data = await res.json();
    const tbody = document.getElementById('deposits-tbody');
    tbody.innerHTML = '';
    data.forEach(d => {
      tbody.innerHTML += `<tr>
        <td>${d.savingID}</td>
        <td>${d.savingName}</td>
        <td>${d.descrip}</td>
        <td>
          <button class='btn btn-sm btn-primary' onclick='openEditModal(${JSON.stringify(d)})'>编辑</button>
          <button class='btn btn-sm btn-danger' onclick='openDeleteModal(${d.savingID})'>删除</button>
        </td>
      </tr>`;
    });
    bootstrap.Modal.getInstance(document.getElementById('searchModal')).hide();
  };
  </script>
  <script src="/static/js/main.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>